<template>
    <Modal
        v-model="modalData.show"
        :title="`${isAdd ? '创建' : '修改'}组件`"
        @on-visible-change="changeVisible"
        class="my-modal">
        <Form
            ref="formInline"
            :label-width="130"
            :model="formInline"
            :rules="ruleInline">
            <FormItem prop="name" label="组件名称">
                <Input clearable v-model="formInline.name"></Input>
            </FormItem>
            <FormItem prop="type"  label="组件类型">
                <Select filterable transfer filterable clearable v-model="formInline.type" placeholder="">
                    <!-- 添加修改时，屏蔽了原数组中第一个‘其他’选项，所以值都需要+1 -->
                    <Option v-for="item in typeOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>
            <FormItem prop="version" label="版本号">
                <Input clearable v-model="formInline.version"></Input>
            </FormItem>
            <FormItem prop="licenseType"  label="许可类型">
                <Input clearable v-model="formInline.licenseType"></Input>
            </FormItem>
            <FormItem prop="publisher" label="供应商">
                <Input clearable v-model="formInline.publisher"></Input>
            </FormItem>
            <FormItem prop="bomId" label="物料清单引用标识">
                <Input clearable v-model="formInline.bomId"></Input>
            </FormItem>
            <FormItem prop="groupId" label="分组">
                <Input clearable v-model="formInline.groupId"></Input>
            </FormItem>
            <FormItem prop="latestVersion" label="最新版本">
                <Input clearable v-model="formInline.latestVersion"></Input>
            </FormItem>
            <FormItem prop="author" label="作者">
                <Input clearable v-model="formInline.author"></Input>
            </FormItem>
            <FormItem prop="groupAddress" label="包URL">
                <Input clearable v-model="formInline.groupAddress"></Input>
            </FormItem>
            <FormItem prop="enumItem" label="CPE名称" class="my-form-item">
                <Input clearable v-model="formInline.enumItem"></Input>
                <Tooltip style="margin-left: 10px;" transfer max-width="200" content="通用平台枚举，是指MITRE或者NIST提供的CPE V2.2或者CPE V2.3的URI" placement="top">
                <Icon type="ios-alert" class="ios-alert" />
                </Tooltip>
            </FormItem>
            <FormItem prop="swid" label="软件标识标签" class="my-form-item">
                <Input clearable v-model="formInline.swid"></Input>
                <Tooltip style="margin-left: 10px;" transfer max-width="200" content="由软件厂商提供的按照ISO/IEC 19770-2:2015规范的标记识别符" placement="top">
                <Icon type="ios-alert" class="ios-alert" />
                </Tooltip>
            </FormItem>
            <FormItem prop="objectId" label="对象标识">
                <Input clearable v-model="formInline.objectId"></Input>
            </FormItem>
            <FormItem prop="fileName" label="文件名称">
                <Input clearable v-model="formInline.fileName"></Input>
            </FormItem>
            <FormItem prop="description"  label="描述">
                <Input clearable v-model="formInline.description" type="textarea" :rows="3"></Input>
            </FormItem>
            <FormItem prop="licenseFileLink"  label="许可文件链接">
                <Input clearable v-model="formInline.licenseFileLink"></Input>
            </FormItem>
            <FormItem prop="licenseDescription"  label="版权说明">
                <Input clearable v-model="formInline.licenseDescription" type="textarea" :rows="3"></Input>
            </FormItem>
            <FormItem prop="md5"  label="MD5">
                <Input clearable v-model="formInline.md5" type="textarea" :rows="3"></Input>
            </FormItem>
            <FormItem prop="sha1"  label="SHA1">
                <Input clearable v-model="formInline.sha1" type="textarea" :rows="3"></Input>
            </FormItem>
            <FormItem prop="sha256"  label="SHA256">
                <Input clearable v-model="formInline.sha256" type="textarea" :rows="3"></Input>
            </FormItem>
            <FormItem prop="sha512"  label="SHA512">
                <Input clearable v-model="formInline.sha512" type="textarea" :rows="3"></Input>
            </FormItem>
            <FormItem prop="sha3256"  label="SHA3 256">
                <Input clearable v-model="formInline.sha3256" type="textarea" :rows="3"></Input>
            </FormItem>
            <FormItem prop="sha3512"  label="SHA3 512">
                <Input clearable v-model="formInline.sha3512" type="textarea" :rows="3"></Input>
            </FormItem>
            <FormItem prop="announcements"  label="注意事项">
                <Input clearable v-model="formInline.announcements" type="textarea" :rows="3"></Input>
            </FormItem>
        </Form>
        <div slot="footer" class="footer">
            <Button @click="modalData.show = false">取消</Button>
            <Button @click="saveProductComponent" :loading="modalData.loading" type="primary">确定</Button>
        </div>
    </Modal>
</template>

<script>
import { MODULE_TYPE_OPTIONS } from '../../paramsConfig'
import {
  addProductComponent,
  updateProductComponent,
} from '../../asset/api/productComponent'
import { validateName } from '@/libs/reg'

export default {
    name: 'ProductsGroupModal',
    props: {
        productId: {
            type: String,
            default: ''
        },
        isPublic: {
            type: Boolean,
            default: false
        },
        partId: {
            type: String,
            default: ''
        }
    },
    computed: {
    },
    data() {
        return {
            typeOptions: MODULE_TYPE_OPTIONS.map((item, index) => {
                return {
                    value: index,
                    label: item
                }
            }).filter(item => [1, 2, 3, 4, 5].includes(item.value)),
            modalData: {
                show: false,
                loading: false
            },
            formInline: {
                name: '',
                productId: this.productId,
                bomId: '',
                version: '',
                groupId: '',
                latestVersion: '',
                author: '',
                groupAddress: '',
                enumItem: '',
                swid: '',
                objectId: '',
                type: '',
                fileName: '',
                description: '',
                md5: '',
                sha1: '',
                sha256: '',
                sha512: '',
                sha3256: '',
                sha3512: '',
                announcements: '',
                licenseType: '',
                licenseFileLink: '',
                licenseDescription: '',
                publisher: '',
                visibility: this.isPublic ? 'public' : ''
            },
            ruleInline: {
                name: [
                    { required: true, message: '组件名称不能为空', trigger: 'blur,change' },
                    { type:'string',max: 64,trigger:'blur,change',message:'最多输入64个字符' },
                    { validator:validateName, trigger: 'blur,change' }
                ],
                type: [
                    { required: true, type:'number', message: '组件类型不能为空', trigger: 'blur,change' }
                ],
                version: [
                    { required: true, message: '版本号不能为空', trigger: 'blur,change' }
                ],
                licenseType: [
                    { required: true, message: '许可类型不能为空', trigger: 'blur,change' }
                ],
            },
            isAdd: false
        }
    },
    methods: {
        // 隐藏模态框时，重置表单数据
        changeVisible(type) {
            if (!type) {
                this.$refs.formInline.resetFields()
                this.modalData.loading = false
            }
        },
        // 打开模态框
        showModal(data) {
            this.isAdd = !data
            this.modalData.show = true
            let obj = data || {}
            this.formInline = Object.assign({
                productId: this.productId,
                partId: this.partId,
                visibility: this.isPublic ? 'public' : ''
            }, obj)
        },
        // 保存数据
        saveProductComponent() {
            this.$refs.formInline.validate(valid => {
                if (valid) {
                    this.modalData.loading = true
                    let apiName = this.isAdd ? addProductComponent : updateProductComponent
                    if (this.isAdd) { // 创建操作确认把id删掉，避免造成错误
                        delete this.formInline.id
                    }
                    apiName(this.formInline).then(({ code, message, data = {} }) => {
                        if (code !== 1) {
                            this.$Message.warning(message)
                            return
                        }
                        // 创建成功
                        this.$Message.success(`${this.isAdd ? '创建' : '修改'}组件成功`)
                        this.modalData.show = false
                        this.$emit(this.isAdd ? 'add-succee' : 'update-succee', data)
                    }).catch(() => {
                        this.$Message.error(`${this.isAdd ? '创建' : '修改'}组件异常`)
                    }).finally(() => {
                        this.modalData.loading = false
                    })
                }
            })
        },
    }
}
</script>

<style scoped>
.my-form-item {
    position: relative;
}
.my-form-item /deep/ .ivu-form-item-content {
    display: flex;
}
.my-form-item /deep/ .ios-alert {
    color: orange;
    font-size: 16px;
    cursor: pointer;
}
</style>
